<script setup>
import { onMounted, watch } from 'vue';
import { useTotle } from '../../stores/homeStore'
import {useBanner} from '../../stores/bannerStore'
import { storeToRefs } from 'pinia'

const homeTotle = useTotle()
const { product, user } = storeToRefs(homeTotle)
const banner = useBanner()
const { banlist } = storeToRefs(banner)
onMounted(() => {
    homeTotle.handleGetProduct()
    homeTotle.handleGetUser()
    banner.handleBanner()
})

watch(banlist.length,(newBanner) => {
    if(newBanner) {
    banner.handleBanner()
    console.log('图片更新');
    }
})
</script>

<template>
    <div class="home">
        <el-carousel 
        :interval="4000" 
        arrow="always" 
        autoplay
        loop 
        >
            <el-carousel-item v-for="item in banlist" :key="item.alt">
                <el-image :src="item.img" :alt="item.alt"></el-image>
            </el-carousel-item>
        </el-carousel>

        <el-row :gutter="14" class="row">
            <el-col :span="6" class="col">
                <div>
                    <el-statistic :value="product">
                        <template #title>
                            <div>
                                <span class="span">产品总数:</span>
                            </div>
                        </template>
                        <template #prefix>
                            <el-icon><Goods /></el-icon>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6" class="col">
                <div>
                    <el-statistic :value="user">
                        <template #title>
                            <div>
                                <span  class="span">用户总数:</span>
                            </div>
                        </template>
                        <template #prefix>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped lang="scss">
.home {
    width: 100%;
    height: 90%;
    background-color: white;
    box-sizing: border-box;
    padding: 20px 30px;

    & .el-carousel{
        border: 1px solid gray;

        .el-image{
            width: 100%;
            height: 100%;
        }
    }

    & .row{
        margin-top: 30px;
        padding: 0 7px;
    }
    & .col{
        border: 3px dashed rgba(128, 128, 128, 0.634);
        padding-left: unset;
        padding: 40px;
        margin-right:50px ;
        text-align: center;
        font-size: 50px;
    }

    & .span{
        font-size: 20px;
    }
}
</style>